Storybook Process - Adam Kozsil

Part 1

For my storybook project I decided to depict my ski trip which had taken place over the winter break. I wanted to keep my assignment simple so I decided that I would make a grid and do a simple characeture of me, then me driving to a ski resort, and then snowboarding.

The Figma file I created with my theme in mind.
The Figma file I created with my theme in mind.

Part 2: Coding

For part two, the most difficult part definitely came from my first scene. I knew I didn't want to create my image going 1 by 1 with each grid as I had increased the grid size from the Exercise 2 assignment and as such it'd take much more time. Referencing the solutions list provided by my instructor I figured out how to place css objects in specific positions. Once I was able to figure out how this process worked it was much smoother and quicker of a process going into the next 2 scenes as I was able to reuse the code and process. While I was coding I also decided at some point to change the design of my figma file. I haphazardly put together the design for the people and to keep it more consistent I decided to give a simple haircut to myself which carries over from scene 1 to scene 3.

Coding Process recreating the image
Coding Process recreating the image. Also showing my folder structure.